<template>
    <div>
        <n-h6 type="success" prefix="bar">
            <n-text>设备指令</n-text>
        </n-h6>

        <n-tree
                block-line
                show-line
                multiple
                draggable
                :data="data"
                :default-expanded-keys="defaultExpandedKeys"
                key-field="whateverKey"
                label-field="whateverLabel"
                children-field="whateverChildren"
                selectable
                @dragstart="dragstart"
        />

    </div>

</template>

<script setup>
import {getCurrentInstance, ref} from "vue";
const {emitter} = getCurrentInstance()?.proxy;

const dragstart = ({node, event}) =>{
    // 保存当前拖拽的元素节点
    emitter.emit("node", node)
    console.log("dragger....", node, event)
}

const data = ref([
    {
        whateverLabel: "光学头",
        whateverKey: 22,
        whateverChildren: [
            {
                whateverLabel: "自主参数建链",
                whateverKey: 2223,
            },
            {
                whateverLabel: "FSM精跟扫描",
                whateverKey: 2213,
            },
            {
                whateverLabel: "锚点侦测",
                whateverKey: 2913,
            },
            {
                whateverLabel: "曝光调整",
                whateverKey: 2211,
            },
        ]
    },
    {
        whateverLabel: "蓝转台",
        whateverKey: 24,
        whateverChildren: [
            {
                whateverLabel: "电机控制",
                whateverKey: 2423,
            }
        ]
    }
])
</script>
